<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css计时器做目录</title>
    <style>
        .box{
            counter-reset: bigbox 0;
        }
        .first{
            counter-reset: firstbox 0;
        }
        .first:before{
            color:red;
            content: counter(bigbox) '. ';
            counter-increment: bigbox;
        }
        .second:before{
            color: red;
            content: counter(bigbox) '. ';
            counter-increment: bigbox;
        }
        .third:before{
            color:red;
            content: counter(bigbox) '. ';
            counter-increment: bigbox;
        }
        .f-first:before{
            color:red;
            content: counter(bigbox) '-' counter(firstbox) '. ';
            counter-increment: firstbox;
            padding-left:15px;
        }
        .f-first{
            counter-reset: f-f-f 0;
        }
        .f-f-first:before{
            color: fuchsia;
            content: counter(bigbox) '-' counter(firstbox) '-' counter(f-f-f) '. ';
            counter-increment: f-f-f;
            padding-left: 25px;
        }
        .f-f-second:before{
            color: fuchsia;
            content: counter(bigbox) '-' counter(firstbox) '-' counter(f-f-f)  '. ';
            counter-increment: f-f-f;
            padding-left: 25px;
        }
        .f-second:before{
            color:red;
            content: counter(bigbox) '-' counter(firstbox) '. ';
            counter-increment: firstbox;
            padding-left:15px;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="first">我是第一个</div>
    <div class="f-first">我是1-1</div>
    <div class="f-f-first">我是1-1-1</div>
    <div class="f-f-second">我是1-1-2</div>
    <div class="f-second">我是1-2</div>
    <div class="second">我是第二个</div>
    <div class="third">我是第三个</div>
</div>
</body>
</html>